<template>
  <div class="topic-header">
    <div>
      <span class="name">{{ name }}</span>
      <span class="enName">{{ enName }}</span>
    </div>
    <div class="more-wrapper" v-if="showMore">
      <div class="more-text" @click="toList">MORE</div>
      <div class="indicator-wrapper">
        <div class="indicator-item" @click="changeIndex(index)" :class="{active:index===activeIndex}"
             v-for="(item,index) in length" :key="index">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ZoneTopicHeader',
  props: {
    name: '',
    enName: '',
    length: {
      type: Number,
      default: 1
    },
    activeIndex: {
      type: Number,
      default: 0
    },
    showMore:{
      type:Boolean,
      default:false
    }
  },
  methods: {
    changeIndex (index) {
      this.$emit('change', index)
    },
    toList(){
      this.$emit('more')
    }
  }
}
</script>

<style scoped lang="scss">
$mainColor: #3370FF;
.topic-header {
  display: flex;
  align-items: center;

  .name {
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC, sans-serif;
    font-weight: 500;
    color: #323232;
    position: relative;
    z-index: 1;

    &:after {
      content: '';
      position: absolute;
      bottom: 2px;
      z-index: -1;
      left: 0;
      width: 40px;
      height: 6px;
      border-radius: 3px;
      background-image: linear-gradient(to right, #9DE484, $mainColor);
    }
  }

  .enName {
    font-family: PingFangSC-Regular, PingFang SC, sans-serif;
    font-size: 12px;
    color: #909090;
    margin-left: 10px;
    margin-bottom: 2px;
  }

  .more-wrapper {
    flex: 1;
    text-align: right;

    .more-text {
      font-family: PingFangSC-Regular, PingFang SC, sans-serif;
      font-size: 12px;
      color: #646464;
      cursor: pointer;

      &:hover {
        color: $mainColor;
      }
    }

    .indicator-wrapper {
      margin-top: 6px;
      display: flex;
      justify-content: flex-end;

      .indicator-item {
        width: 14px;
        height: 2px;
        border-radius: 1px;
        background-color: #c7c7c7;
        margin-left: 2px;
        cursor: pointer;

        &:hover {
          background-color: $mainColor;
        }

        &.active {
          background-color: $mainColor;
        }
      }
    }
  }
}
</style>
